<template>
  <div class="project-bar-data">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="各省工程造价总额占比"
        name="first"
      >
        <div
          id="project-cost-pie"
          class="echart-box"
        ></div>
      </el-tab-pane>
      <el-tab-pane
        label="各省工程量占比"
        name="second"
      >
        <div
          id="project-num-pie"
          class="echart-box"
        ></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProjectCostPie",
  props: {
    msg: String,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {
    this.$nextTick(() => {
      this.generateEchart();
    });
  },
  methods: {
    handleClick() {
      this.$nextTick(() => {
        this.generateEchart();
      });
    },
    generateEchart() {
      let rentalEchart = "";
      if (this.activeName === "first") {
        rentalEchart = echarts.init(
          document.getElementById("project-cost-pie")
        );
      }
      if (this.activeName === "second") {
        rentalEchart = echarts.init(document.getElementById("project-num-pie"));
      }
      let option = this.generateOptions();
      rentalEchart.setOption(option);
    },
    generateOptions() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        grid: {
          containLabel: true,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };

      return option;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../common/css/common";
.project-bar-data {
  width: 100%;
  height: 300px;
  background: #ffffff;
  box-sizing: border-box;
}
.echart-box {
  width: 100%;
  height: 236px;
  background: #ffffff;
}
::v-deep .el-tabs__header{
  margin:0;
}
</style>
